/*
 * @Author: xiaosihan 
 * @Date: 2023-08-19 15:09:34 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-16 18:43:56
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./preview2D3D.module.less";
import Preview3D from "./Preview3D/Preview3D";
import clsx from "clsx";
import preview3DRenderer from "@/editorComponent/preview3DRenderer";
import preview2DRenderer from "@/editorComponent/preview2DRenderer";
import Preview2D from "./Preview2D/Preview2D";
import PreviewModal from "./PreviewModal/PreviewModal";
import PreyiewBtn from "./PreyiewBtn/PreyiewBtn";
import editorStore from "@/editorComponent/editorStore";
import { Button } from "antd";

interface Iprops {
}

// 2d3d预览
export default function Preview2D3D() {

  const dom = useRef<HTMLDivElement | null>(null);
  const [hasMockup, setHasMockup] = useState(false);
  const [view, setView] = useState("3D");
  const [fillType, setFillType] = useState(0);

  useEffect(() => {
    preview2DRenderer.clear();
  }, []);

  useEffect(() => autorun(() => {
    const { goodsData } = editorStore;
    if (goodsData) {
      const hasMockup = goodsData.mockupUrls.length > 0;
      setHasMockup(hasMockup);
      setFillType(goodsData.fillType);

      // 满版印刷模型展示3d, 局部硬刷默认展示2d
      setView(goodsData.fillType === 0 ? "3D" : "2D");
    } else {
      setHasMockup(false);
    }

  }), []);

  return (
    <div className={styles.preview2D3D} >

      <span className={styles.switch} >

        <Button
          type={view === "2D" ? "primary" : "default"}
          size="small"
          onClick={() => setView("2D")}
          className={clsx(styles.switch_item)}
        >2D</Button>

        {(fillType === 0) && <Button
          type={view === "3D" ? "primary" : "default"}
          onClick={() => setView("3D")}
          size="small"
          className={clsx(styles.switch_item)}
        >3D</Button>}

        {/* 满版印刷的衣服才显示3d按钮 */}
        {/* {
          (fillType === 0) &&
          <span
            className={clsx(styles.switch_item, view === "3D" && styles.active)}
            onClick={() => setView("3D")}
          >3D</span>
        }

        {
          hasMockup &&
          <span
            className={clsx(styles.switch_item, view === "2D" && styles.active)}
            onClick={() => setView("2D")}
          >2D</span>
        } */}
      </span>

      {/* 满版印刷的衣服才显示3d 模型 */}
      {(fillType === 0) && <Preview3D show={view === "3D"} />}
      <Preview2D show={view === "2D"} />

      <div
        className={styles.canvas3drender}
        ref={dom => preview3DRenderer.setContainer(dom)}
      >  </div>

      <div
        className={styles.canvas2drender}
        ref={dom => preview2DRenderer.setContainer(dom)}
      >  </div>

      {/* 预览弹窗 */}
      <PreviewModal />

      {/* 打开预览弹窗按钮 */}
      <PreyiewBtn />

    </div>
  );

}